@import "../variable";

@tooltip_max-width: 500px;
@tooltip_shadow: 0 1px 4px 0 fade(@shadow-color, 20%), 0 0 0 1px fade(@shadow-color, 0.5%);

.tau-chart {
    &__tooltip {
        background: fade(@bg-color, 90%);
        position: absolute;
        top: 0;
        left: 0;
        max-width: none;
        z-index: 900;

        align-items: stretch;
        display: flex;
        flex-direction: column;

        box-shadow: @tooltip_shadow;
        font-size: @font-size-xs;
        font-family: @fontFamily;

        /* Fade */
        &.fade {
            opacity: 0;
            transition: opacity 200ms ease-out;
        }
        &.fade.in {
            opacity: 1;
            transition-duration: 500ms;
        }

        &.top-right,
        &.bottom-right {
            margin-left: 8px;
        }
        &.top-left,
        &.bottom-left {
            margin-left: -8px;
        }
        &.top,
        &.top-right,
        &.top-left {
            margin-top: 8px;
        }

        &__content {
            box-sizing: border-box;
            max-width: @tooltip_max-width;
            min-width: 100px;
            overflow: hidden;
            padding: 15px 15px 10px 15px;
        }

        &__buttons {
            background: @tooltip_btn-bg-color;
            bottom: 100%;
            box-shadow: @tooltip_shadow;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: @tooltip_max-width;
            min-width: 86px;
            position: absolute;
            width: 100%;
            z-index: -1;

            &::after {
                background: linear-gradient(to bottom, @bg-color 50%, fade(@bg-color, 0%));
                content: "";
                display: block;
                height: 8px;
                left: 0;
                pointer-events: none;
                position: absolute;
                top: 100%;
                width: 100%;
            }
        }

        &__button {
            color: @tooltip_btn-font-color;
            cursor: pointer;
            display: inline-flex;
            flex: 1 0 auto;
            height: 0;
            overflow: hidden;
            transition: height 500ms;

            &__wrap {
                line-height: 26px;
                padding: 0 15px;
            }

            &:hover {
                background: mix(@bg-color, @tooltip_btn-bg-color, 50%);
                color: @font-color;
            }

            .tau-icon-close-gray {
                background-image: url();
                display: inline-block;
                width: 12px;
                height: 12px;
                position: relative;
                top: 3px;
                margin-right: 5px;
            }
        }

        &.stuck &__button {
            height: 26px;
        }

        // buttons slide from bottom
        &.top &__buttons,
        &.top-right &__buttons,
        &.top-left &__buttons {
            bottom: initial;
            top: 100%;

            &__wrap {
                // stick button content to bottom
                position: relative;
                top: ~"calc(100% - 26px)";
            }

            &::after {
                background: linear-gradient(to top, @bg-color 50%, fade(@bg-color, 0%));
                bottom: 100%;
                top: initial;
            }
        }

        &.top-right &__button__wrap,
        &.top-left &__button__wrap {
            position: relative;
            top: ~"calc(100% - 26px)";
        }

        &__list {
            display: table;

            &__item {
                display: table-row;
            }

            &__elem {
                display: table-cell;
                padding-bottom: 4px;
                line-height: 1.3;
                color: @shadow-color;

                &:not(:first-child) {
                    padding-left: 15px;
                }

                &:first-child {
                    color: @font-gray-dark;
                }
            }
        }

        &__gray-text {
            color: @font-gray-dark;
        }
    }

    &__tooltip-target {
        cursor: pointer;
    }

    &__tooltip-target &__dot&__highlighted,
    &__tooltip-target &__bar&__highlighted,
    &__tooltip-target .i-data-anchor&__highlighted {
        stroke: @font-color;
        stroke-width: 1;
    }

    &__tooltip-target &__bar&__highlighted {
        shape-rendering: crispEdges;
    }
}
